<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>查看用户</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <script type="text/javascript" src="/static/common/polyfill.min.js"></script><!--适配IE-->
    <link rel="stylesheet" href="/static/common/layui/css/layui.css"/>
    <link rel="stylesheet" href="/static/common/global.css"/>
</head>
<body>
<div style="margin: 15px;" id="vue">
    <blockquote class="layui-elem-quote">
        <button type="button" class="layui-btn layui-btn-xs" onclick="window.location.reload()"><i class="layui-icon">&#x1002;</i>刷新
        </button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="addUser"><i
                class="layui-icon">&#xe61f;</i>新增
        </button>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>用户列表</legend>
        <div class="layui-field-box layui-form">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="content"></tbody>
            </table>
        </div>
    </fieldset>

    <!--分页容器-->
    <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
    </div>
</div>
<script type="text/html" id="tpl">
    <![CDATA[
    {{# layui.each(d.data,function(index,item){ }}
    <tr>
        <td>{{ item.username || "--" }}</td>
        <td>{{ item.realname || "--" }}</td>

        <td>
            {{# if(item.sex == 1){ }}
            男
            {{# } }}
            {{# if(item.sex == 2){ }}
            女
            {{# } }}
            {{# if(item.sex != 2 && item.sex != 1){ }}
            ---
            {{# } }}
        </td>
        <td>{{ item.mobile || "--" }}</td>
        <td>{{ item.email || "--" }}</td>
        <td>
            <a class="layui-btn layui-btn-xs layui-btn-danger" data-opt="delete">删除</a>
        </td>
    </tr>
    {{# }); }}
    ]]>
</script>
<script type="text/html" id="addUserTpl">
    <form class="layui-form" style="margin-top: 15px;margin-right: 15px;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="请输入用户名" name="username"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" class="layui-input" placeholder="请输入密码" name="password"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户类别</label>
            <div class="layui-input-inline">
                <select name="category" class="layui-select" lay-search="">
                    <option value="">请选择用户类别</option>
                    <option value="2">学生</option>
                    <option value="3">教师</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男"/>
                <input type="radio" name="sex" value="2" title="女"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="add">确定</button>
            </div>
        </div>
    </form>
</script>
<script type="text/javascript" src="/static/common/axios.min.js"></script>
<script type="text/javascript" src="/static/common/layui/layui.js"></script>
<script type="text/javascript" src="/static/common/vue.min.js"></script>
<script>
    layui.config({
        base: "/static/js/layuiModulesExtend/"
    }).use(['paging', 'form', 'laytpl', 'element'], function () {
        var $ = layui.$,
            element = layui.element,
            paging = layui.paging(),
            layer = layui.layer,
            laytpl = layui.tpl,
            form = layui.form;

        var vm = new Vue({
            el: "#vue",
            data: {},
            methods: {
                addUser: function () {
                    console.log("新增用户");
                    layer.open({
                        type: 1,
                        title: '新增用户',
                        area: ['auto', 'auto'],
                        content: $("#addUserTpl").html(),
                        success: function (layero, index) {
                            form.render();
                            form.on("submit(add)", function (data) {
                                console.log(data);
                                var user = {
                                    username: data.field.username,
                                    sex: data.field.sex,
                                    password: data.field.password,
                                    category: data.field.category,
                                    status: 1
                                };
                                axios.post("/user/add", user)
                                    .then(function (response) {
                                        console.log(response);
                                        if (response.data.success) {
                                            layer.msg(response.data.msg, {icon: 1});
                                            paging.init();
                                            layer.close(index);
                                        }
                                        else {
                                            layer.msg(response.data.msg, {icon: 2});
                                        }
                                    })
                                    .catch(function (msg) {
                                        console.log(msg);
                                    });
                                return false;
                            });
                        }, end: function (layero, index) {
                            layer.close(index);
                        }

                    });
                }
            }
        });

        paging.init({
            openWait: true,
            url: "/user/findBatchByCondition",
            elem: '#content',//内容容器
            params: {    //参数设置

            },
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            tempElem: '#tpl', //模块容器
            pageConfig: { //分页参数配置
                elem: 'paged', //分页容器
                pageSize: 10 //分页大小
            },
            success: function () {
//                alert("获取数据成功");
            },
            fail: function (msg) {
//                console.log(msg);
//                alert("获取数据失败");
            },
            complate: function () {
//                element.init();
                $("#content").children('tr').each(function () {
                    var $last = $(this).children('td:last-child');

                    /**
                     * 删除用户
                     */
                    $last.children('a[data-opt=delete]').on('click', function () {
                        console.log("删除用户");
                    });
                });
            }
        })
    });

</script>
</body>
</html>